<!--
自制三角
  - ::after
  - 父相子绝
  - 顺时针45deg
-->

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  div {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid black;
  }
  div::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    transform: rotate(45deg);
    transition: all 0.2s;
  }
  div:hover::after {
    transform: rotate(225deg);
  }
</style>

<div></div>
